<template>
  <Card :dis-hover="true">
    <p slot="title">结项报告书</p>
    <Tabs type="card" v-model="tab.value">
      <Button v-if="tab.value !== '3'" v-show="!tpl" slot="extra" type="primary" ghost @click="next">下一页</Button>
      <Button v-else slot="extra" type="primary" v-show="!tpl" ghost @click="submit">提交</Button>

      <TabPane name="0" ref="pane0" label="项目计划书正文">
        <div class="tab_content">
          <md-card class>
            <md-card-header>
              <div class="md-title">项目执行简况</div>
            </md-card-header>
            <md-card-content>
              <md-field>
                <!-- <label for="content">项目计划书正文</label>
                <md-textarea name="content" v-model="article.Content"  md-counter="3200" md-autogrow></md-textarea>-->
                <label>项目执行简况</label>
                <md-textarea v-model="article.Situation" :md-counter="3200"></md-textarea>
              </md-field>
            </md-card-content>
          </md-card>
        </div>
      </TabPane>

      <TabPane name="1" ref="pane1" label="训练效果情况">
        <div class="tab_content">
          <md-card class>
            <md-card-header>
              <div class="md-title">训练效果情况</div>
            </md-card-header>
            <md-card-content>
              <md-field>
                <!-- <label for="content">项目计划书正文</label>
                <md-textarea name="content" v-model="article.Content"  md-counter="3200" md-autogrow></md-textarea>-->
                <label>1.项目组成员在创新精神、创业意识和创新创业能力方面的收获与成效；2.项目执行的经验总结，不得少于800字。</label>
                <md-textarea v-model="article.Effect" :md-counter="3200"></md-textarea>
              </md-field>
            </md-card-content>
          </md-card>
        </div>
      </TabPane>

      <TabPane name="2" ref="pane2" label="后期推进计划">
        <div class="tab_content">
          <md-card class>
            <md-card-header>
              <div class="md-title">后期推进计划</div>
            </md-card-header>
            <md-card-content>
              <md-field>
                <!-- <label for="content">项目计划书正文</label>
                <md-textarea name="content" v-model="article.Content"  md-counter="3200" md-autogrow></md-textarea>-->
                <label>项目在后续发展中的计划、目标和内容措施等</label>
                <md-textarea v-model="article.Plan" :md-counter="3200"></md-textarea>
              </md-field>
            </md-card-content>
          </md-card>
        </div>
      </TabPane>
      <TabPane name="3" ref="pane3" label="项目成果情况">
        <div class="tab_content">
          <md-card class>
            <md-card-header>
              <div class="md-title">项目成果情况</div>
            </md-card-header>
            <md-card-content>
              <div class v-if="!tpl">
                <Button type="primary" ghost @click="addResultHandler">添加成果物</Button>
              </div>
              <br/>
              <p>学术论文类</p>
              <Table :data="data0" :columns="column0"></Table>
              <br/>
              <p>专利成果类</p>
              <Table :data="data1" :columns="column1"></Table>
              <br/>
              <p>产品开发类</p>
              <Table :data="data2" :columns="column2"></Table>
              <br/>
               <p>社会服务类</p>
              <Table :data="data3" :columns="column3"></Table>
              <br/>
               <p>企业合作类</p>
              <Table :data="data4" :columns="column4"></Table>
              <br/>
               <p>成果获奖类</p>
              <Table :data="data5" :columns="column5"></Table>
              <br/>
            </md-card-content>
          </md-card>
        </div>
        <Modal v-model="addResultFlag" title="添加成果物" @on-ok="addBtnHandler">
          <Form label-position="left">
            
            <FormItem label="成果物类型">
              <Select v-model.trim="resultItem.Type">
                <Option v-for="item in retultType" :value="item.key" :key="item.key">{{item.value}}</Option>
              </Select>
            </FormItem>
            <div v-if="resultItem.Type == 0">
              <FormItem label="论文名称">
                <Input type="text" v-model.trim="resultItem.Name"></Input>
              </FormItem>
              <FormItem label="期刊名称">
                   <Input type="text" v-model.trim="resultItem.Content"></Input>
              </FormItem>
              <FormItem label="刊次">
                <Input type="text" v-model.trim="resultItem.Attach"> </Input>
              </FormItem>
            </div>
            <div v-else-if="resultItem.Type == 1">
              <FormItem label="专利名称">
                 <Input type="text" v-model.trim="resultItem.Name"></Input>
              </FormItem>
              <FormItem label="专利号">
                 <Input type="text" v-model.trim="resultItem.Content"></Input>
              </FormItem>
              <FormItem label="获批时间">
               <Input type="text" v-model.trim="resultItem.Attach"> </Input>
              </FormItem>
            </div>
            <div v-else-if="resultItem.Type == 2">
              <FormItem label="产品名称">
                <Input type="text" v-model.model.trim="resultItem.Name"></Input>
              </FormItem>
              <FormItem label="开发阶段">
                 <RadioGroup  v-model="resultItem.Content">
                    <Radio label="0">原型设计</Radio>
                    <Radio label="1">推广测试</Radio>
                    <Radio label="2">实际应用</Radio>
                </RadioGroup>
              </FormItem>
              <FormItem label="应用情况">
               <Input type="text" v-model.trim="resultItem.Attach"> </Input>
              </FormItem>
            </div>
            <div v-else-if="resultItem.Type == 3">
              <FormItem label="服务对象">
                <Input type="text" v-model.trim="resultItem.Name"></Input>
              </FormItem>
              <FormItem label="服务对象">
                <Input type="text" v-model.trim="resultItem.Content"></Input>
              </FormItem>

            </div>
            <div v-else-if="resultItem.Type == 4">
              <FormItem label="企业名称">
                <Input type="text" v-model.trim="resultItem.Name"></Input>
              </FormItem>
              <FormItem label="合作内容">
                <Input type="text" v-model.trim="resultItem.Content"></Input>
              </FormItem>
            </div>
            <div v-else-if="resultItem.Type == 5">
              <FormItem label="奖项名称">
                <Input type="text" v-model.trim="resultItem.Name"></Input>
              </FormItem>
              <FormItem label="颁奖机构">
                <Input type="text" v-model.trim="resultItem.Content"></Input>
              </FormItem>
              <FormItem label="获奖级别">
                 <Input type="text" v-model.trim="resultItem.Attach"> </Input>
              </FormItem>
            </div>
            
          </Form>
        </Modal>
      </TabPane>
    </Tabs>
  </Card>
</template>
<script>
import { newApiParams, GUID } from '@/common/utils';
import { SERVER_CPT_URL } from '@/api/config';
// import { MdField } from 'vue-material/dist/components';
import { mapState } from 'vuex';
export default {
  name: 'Chuangxin',
  //   components: {
  //     'md-field': MdField
  //   },
  data () {
    return {
      addResultFlag: false,
      tab: {
        extraLabel: '下一页',
        value: '0'
      },
      article: {
        Situation: '',
        Effect: '',
        Plan: '',
        ImsProject: {
          Id: this.$route.params.projectId
        },
        ImsProjectFinishAttach: []
      },
      retultType: [
        {
          key: 0,
          value: '学术论文类'
        },
        {
          key: 1,
          value: '专利成果类'
        },
        {
          key: 2,
          value: '产品开发类'
        },
        {
          key: 3,
          value: '社会服务类'
        },
        {
          key: 4,
          value: '企业合作类'
        },
        {
          key: 5,
          value: '成果获奖类'
        }
      ],
      resultItem: {
        Name: '',
        Content: '',
        Attach: '',
        Type: 0
      },
      column0: [
        { key: 'Name', title: '论文名称' },
        { key: 'Content', title: '期刊名称' },
        { key: 'Attach', title: '刊次' },
        {
          title: '操作',
          render: (h, { row, index }) => {
            return h('Button', { props: { type: 'primary', ghost: true }, on: { click: () => { this.data0.splice(index, 1); } } }, '移除');
          }
        }
      ],
      data0: [],
      column1: [
        { key: 'Name', title: '专利名称' },
        { key: 'Content', title: '专利号' },
        { key: 'Attach', title: '获批时间' },
        {
          title: '操作',
          render: (h, { row, index }) => {
            return h('Button', { props: { type: 'primary', ghost: true }, on: { click: () => { this.data1.splice(index, 1); } } }, '移除');
          }
        }
      ],
      data1: [],
      column2: [
        { key: 'Name', title: '产品名称' },
        { 
          key: 'Content', 
          title: '开发阶段', 
          render: (h, { row }) => { 
            if (row.Content === '0') {
              return '原型设计'; 
            } else if (row.Content === '1') {
              return '推广测试'; 
            } else {
              return '实际应用';
            }
          } 
        },
        { key: 'Attach', title: '应用情况' },
        {
          title: '操作',
          render: (h, { row, index }) => {
            return h('Button', { props: { type: 'primary', ghost: true }, on: { click: () => { this.data2.splice(index, 1); } } }, '移除');
          }
        }
      ],
      data2: [],
      
      column3: [
        { key: 'Name', title: '服务对象' },
        { key: 'Content', title: '服务情况' },
        {
          title: '操作',
          render: (h, { row, index }) => {
            return h('Button', { props: { type: 'primary', ghost: true }, on: { click: () => { this.data3.splice(index, 1); } } }, '移除');
          }
        }
      ],
      data3: [],
      column4: [
        { key: 'Name', title: '企业名称' },
        { key: 'Content', title: '合作内容' },
        {
          title: '操作',
          render: (h, { row, index }) => {
            return h('Button', { props: { type: 'primary', ghost: true }, on: { click: () => { this.data4.splice(index, 1); } } }, '移除');
          }
        }
      ],
      data4: [],
      column5: [
        { key: 'Name', title: '奖项名称' },
        { key: 'Content', title: '颁发机构' },
        { key: 'Attach', title: '获奖级别' },
        {
          title: '操作',
          render: (h, { row, index }) => {
            return h('Button', { props: { type: 'primary', ghost: true }, on: { click: () => { this.data5.splice(index, 1); } } }, '移除');
          }
        }
      ],
      data5: []
    };
  },
  props: {
    tpl: {
      type: Boolean,
      default: () => false
    },
    ath: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    user () {
      return this.$store.state.app.userInfo;
    },
    actionUrl () {
      return SERVER_CPT_URL + '/upload/fileupload';
    },
    uploadData () {
      return {
        Authorization: localStorage.getItem('token')
      };
    },
    addmode () {
      return !!this.$route.params.addMode;
    },
    editable () {
      return !!this.$route.params.editable;
    },
    projectId () {
      return this.$route.params.projectId;
    }
  },
  methods: {
    next () {
      switch (this.tab.value) {
      case '0':
        if (this.article.Situation) {
          //   console.log('下一步');
          this.tab.value = '1';
          //   this.$refs['pane1'].click();
        } else {
          this.$Message.warning('请补充信息');
        }
        break;
      case '1':
        if (!this.article.Problems) {
          this.$Message.warning('请补充项目成员信息！');
          //   this.tab.value = '1';
        } else {
          this.tab.value = '2';
        }
        break;
      case '2':
        if (!this.article.Plan) {
          this.$Message.warning('请补充项目成员信息！');
          //   this.tab.value = '1';
        } else {
          this.tab.value = '2';
        }
        break;
      }
    },
    submit () {
      if (
        this.article.Situation &&
        this.article.Effect &&
        this.article.Plan
      ) {
        this.$Modal.confirm({
          title: '操作确认',
          content: '<p>确认后不能修改，请仔细检查，是否确认提交？</p>',
          onOk: () => {
            console.log(this.projectId);
            // this.$Message.success('success!');
            this.article.ImsProjectFinishAttach = this.article.ImsProjectFinishAttach.concat(this.data0);
            this.article.ImsProjectFinishAttach = this.article.ImsProjectFinishAttach.concat(this.data1);
            this.article.ImsProjectFinishAttach = this.article.ImsProjectFinishAttach.concat(this.data2);
            this.article.ImsProjectFinishAttach = this.article.ImsProjectFinishAttach.concat(this.data3);
            this.article.ImsProjectFinishAttach = this.article.ImsProjectFinishAttach.concat(this.data4);
            this.article.ImsProjectFinishAttach = this.article.ImsProjectFinishAttach.concat(this.data5);
            this.$api.SumbitImsProjectFinishReport(this.article).then(
              res => {
                this.$Message.success('success!');
                console.log(res);
                this.$reuter.push({
                  name: '项目管理'
                });
              },
              err => {
                if (err) {
                  this.$Message.error(err);
                }
              }
            );
          },
          onCancel: () => {
            this.$Message.info('Clicked cancel');
          }
        });
      } else {
        this.$Message.warning('请补充信息！');
      }
    },
    addResultHandler () {
      this.addResultFlag = true;
    },
    addBtnHandler () {
      // if (this.resultItem.Name && this.resultItem.Content && this.resultItem.Attach) {
      if (this.resultItem.Name && this.resultItem.Content) {
        this.addResult();
      } else {
        this.$Message.warning('请补充信息！');
      }
    },
    addResult () {
      switch (this.resultItem.Type) {
      case 0:
        this.data0.push(JSON.parse(JSON.stringify(this.resultItem)));
        break;
      case 1:
        this.data1.push(JSON.parse(JSON.stringify(this.resultItem)));
        break;
      case 2:
        this.data2.push(JSON.parse(JSON.stringify(this.resultItem)));
        break;
      case 3:
        this.data3.push(JSON.parse(JSON.stringify(this.resultItem)));
        break;
      case 4:
        this.data4.push(JSON.parse(JSON.stringify(this.resultItem)));
        break;
      case 5:
        this.data5.push(JSON.parse(JSON.stringify(this.resultItem)));
        break;
      default:
      }
      this.resultItem.Type = 0;
      this.resultItem.Name = '';
      this.resultItem.Content = '';
      this.resultItem.Attach = '';
    }
  },
  mounted () {
    if (this.tpl) {
      this.article = this.ath;
    }
    // this.initTutors();
  }
};
</script>
<style scoped>
input {
  max-width: 100%;
  border-radius: 0;
  font: inherit;
  background-color: transparent;
  border-style: none;
  flex: 1 1 auto;
  line-height: 20px;
  padding: 8px 0 8px;
  max-width: 100%;
  min-width: 0px;
  width: 100%;
}
input:active {
  border-style: none;
}
.tab_content {
  margin: 5px;
  line-height: 1.5em;
}
.input-lable {
  vertical-align: middle;
}
.md-textarea {
  min-height: 600px !important;
}
</style>

